<template>
    <view class="container">
        <view class="login-icon">
            <image class="login-img" src="@/static/image/logo.jpg"></image>
        </view>
        <view class="login-from">
            <!-- 账号 -->
            <view class="inputView">
                <image class="nameImage" src="@/static/image/login_name.png"></image>
                <input class="inputText" @input="cancleTip" v-model="userInfo.username" placeholder="请输入账号" />
                <label style="color: red;" v-if="accountShow">账号不能为空！</label>
            </view>
            <!-- 密码 -->
            <view class="inputView">
                <image class="nameImage" src="@/static/image/login_password.png"></image>
                <input class="inputText" @input="cancleTip" v-model="userInfo.password" password="true"
                    placeholder="请输入密码" />
                <label style="color: red;" v-if="pwdShow">密码不能为空！</label>
            </view>
            <view style="padding-left: 10%;">
                <label style="color: red;" v-if="passwordFlag">账号或密码错误！</label>
            </view>
            <!-- 登录按钮 -->
            <view class="loginBtnView" @click="login">
                立即登录
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: {
                    username: "",
                    password: ""
                },
                // 提示显示
                accountShow: false,
                pwdShow: false,
                passwordFlag: false,
                loginOK: 0, //用户第一次登录是0，登录过后变成1，第二次以后自动登录
                isTestMode: true // 新增属性，用于测试模式
            }
        },
        // 自动登录的制作

        async onLoad() {
            this.userInfo.username = await uni.getStorageSync("username")
            this.userInfo.password = await uni.getStorageSync("password")
            this.loginOK = await uni.getStorageSync("loginOK")
            if (this.loginOK === 1) {
                this.login()
            }
        },
        methods: {
            // 取消提示
            cancleTip() {
                this.accountShow = false
                this.pwdShow = false
                this.passwordFlag = false
            },
            async login() {
               

                if (this.userInfo.username === '') {
                    this.accountShow = true
                    return
                }
                if (this.userInfo.password === '') {
                    this.pwdShow = true
                    return
                }
                const username = this.userInfo.username
                const password = this.userInfo.password
                uni.showLoading({
                    title: '登陆中...'
                });
                // 发送登录请求
                uni.request({
                    url: this.$serverApi + "/login",
                    method: "POST",
                    data: {
                        account: username,
                        password: password,
						code:"123",
						uuid:"123123"
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.data.code == 200) {
                            uni.setStorageSync('username', this.userInfo.username)
                            uni.setStorageSync('password', this.userInfo.password)
                            uni.setStorageSync('loginOK', 1) //设置是否自动登录
                            uni.setStorageSync('token', res.data.data) //设置是否自动登录
                            uni.reLaunch({
                                url: '/pages/index/goodsList_swiper'
                            }) //要用这个才可以
                        } else {
                            uni.showToast({
                                title: '网络波动,请稍后再试！',
                                icon: "none",
                                duration: 1000
                            });
                            this.passwordFlag = true
                        }
                    },
                    fail: res => {
                        uni.hideLoading();
                        this.passwordFlag = true
                        uni.showToast({
                            title: '网络波动,请稍后再试！',
                            icon: "none",
                            duration: 1000
                        });
                    }
                })
            }
        }
    }
</script>

<style>
    /* #ifndef H5 */
    page {
        height: 100%;
        background-color: #eeeeee;
    }

    /* #endif */
</style>

<style lang="scss" scoped>
    page {
        height: 100%;
    }

    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        box-sizing: border-box;
        background-color: #f2f6fc;

        /*登录图片*/
        .login-icon {
            flex: none;
        }

        .login-img {
            width: 750rpx;
        }

        /*表单内容*/
        .login-from view:nth-child(2) {
            margin-top: 42rpx;
        }

        .login-from {
            margin-top: -185rpx;
            margin-left: 37rpx;
            position: relative;
            height: 495rpx;
            width: 676rpx;
            background: #ffffff;
            border-radius: 6rpx;

            .inputView {
                background-color: #FFFFFF;
                margin-top: 72rpx;
                margin-left: 32rpx;
                display: flex;
                border-radius: 6rpx;
                height: 76rpx;
                border: 2rpx solid #EEEEEE;
                width: 616rpx;

                /*输入框*/
                .nameImage {
                    margin-left: 22rpx;
                    margin-top: 22rpx;
                    width: 24rpx;
                    height: 24rpx;
                }

                .inputText {
                    margin-left: 25rpx;
                    margin-top: 14rpx;
                    color: #727272;
                    font-size: 30rpx;
                }
            }

            .loginBtnView {
                margin-top: 42rpx;
                margin-left: 24rpx;
                background: #5f8bd2;
                padding-top: 20rpx;
                text-align: center;
                font-size: 32rpx;
                letter-spacing: 4rpx;
                color: #f5ffed;
                height: 78rpx;
                width: 639rpx;
                border-radius: 32rpx;
            }
        }
    }
</style>
